<!-- 已废弃 -->
<template>
  <div class='article-list'>
    <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-skeleton title avatar :row="3" :loading="skeletonLoading">
              <!-- <van-cell v-for="(item,index) in articles" :key="index" :title="item.title" /> -->

              <!-- 单个视频 或图片 小图 不带头像-->
              <div class="item-one">
                <div class="left">
                  <h1 @click="goToArticle">11月上旬这三个板块或将迎来涨停潮</h1>
                  <div class=<strong></strong>"left-bottom">
                    <div>
                      <span class="author-name">你的Maya</span>
                      <span class="comment">945评论</span>
                      <span class="time">2小时前</span>
                    </div>
                    <div>
                      <i class=<strong></strong>"iconfont icon-cha"></i>
                    </div>
                  </div>
                </div>
                <div class="right">
                  <van-image
                    width="120"
                    height="90"
                    fit="cover"
                    src="https://img01.yzcdn.cn/vant/cat.jpeg"
                  />
                </div>
              </div>
              <!-- 单个视频 或图片 小图 带头像-->
              <div class="item-avatar-one">
                <div class="avatar" @click="goToUser">
                  <van-image
                    width="0.9rem"
                    height="0.9rem"
                    fit="cover"
                    round
                    src="https://img01.yzcdn.cn/vant/cat.jpeg"
                  />
                 <div class="author">
                  <a>你的Maya</a>
                  <span>已关注 . 帅哥认证</span>
                 </div>
                </div>
                <div class="bottom">
                  <div class="left">
                  <h1>11月上旬这三个板块或将迎来涨停潮</h1>
                  <div class="left-bottom">
                    <div>
                      <span class="author-name">你的Maya</span>
                      <span class="comment">945评论</span>
                      <span class="time">2小时前</span>
                    </div>
                    <div>
                      <i class="iconfont icon-cha"></i>
                    </div>
                  </div>
                </div>
                <div class="right">
                  <van-image
                    width="120"
                    height="90"
                    fit="cover"
                    src="https://img01.yzcdn.cn/vant/cat.jpeg"
                  />
                </div>
                </div>
              </div>

              <!-- 三张图片 小图 不带头像 -->
              <div class="item-two">
                <div class="top">
                  <h1>数据大屏最简单自适应方案，无需适配rem单位</h1>
                </div>
                <div class="centre">
                  <van-image
                    fit="cover"
                    src="https://img01.yzcdn.cn/vant/cat.jpeg"
                  />
                  <van-image
                    fit="cover"
                    src="https://img01.yzcdn.cn/vant/cat.jpeg"
                  />
                  <van-image
                    fit="cover"
                    src="https://img01.yzcdn.cn/vant/cat.jpeg"
                  />
                </div>
                <div class="bottom">
                    <div>
                      <span class="author-name">你的Maya</span>
                      <span class="comment">945评论</span>
                      <span class="time">2小时前</span>
                    </div>
                    <div>
                      <i class="iconfont icon-cha"></i>
                    </div>
                  </div>
              </div>
              <!-- 三张图片 小图 带头像 -->
              <div class="item-avatar-two">
                <div class="avatar" @click="goToUser">
                  <van-image
                    width="0.9rem"
                    height="0.9rem"
                    fit="cover"
                    round
                    src="https://img01.yzcdn.cn/vant/cat.jpeg"
                  />
                 <div class="author">
                  <a>你的Maya</a>
                  <span>已关注 . 帅哥认证</span>
                 </div>
                </div>
                <div class="top">
                  <h1>数据大屏最简单自适应方案，无需适配rem单位</h1>
                </div>
                <div class="centre">
                  <van-image
                    fit="cover"
                    src="https://img01.yzcdn.cn/vant/cat.jpeg"
                  />
                  <van-image
                    fit="cover"
                    src="https://img01.yzcdn.cn/vant/cat.jpeg"
                  />
                  <van-image
                    fit="cover"
                    src="https://img01.yzcdn.cn/vant/cat.jpeg"
                  />
                </div>
                <div class="bottom">
                    <div>
                      <span class="author-name">你的Maya</span>
                      <span class="comment">945评论</span>
                      <span class="time">2小时前</span>
                    </div>
                    <div>
                      <i class="iconfont icon-cha"></i>
                    </div>
                  </div>
              </div>

              <!-- 单个视频或图片 不带头像  大图显示 -->
              <div class="item-max-three">
                <div class="top">
                  <h1>数据大屏最简单自适应方案，无需适配rem单位</h1>
                </div>
                <div class="centre">
                  <van-image
                    fit="cover"
                    src="https://img01.yzcdn.cn/vant/cat.jpeg"
                  />
                </div>
                <div class="bottom">
                    <div>
                      <span class="author-name">你的Maya</span>
                      <span class="comment">945评论</span>
                      <span class="time">2小时前</span>
                    </div>
                    <div>
                      <i class="iconfont icon-cha"></i>
                    </div>
                  </div>
              </div>
               <!-- 单个视频或图片 带头像  大图显示 -->
               <div class="item-avatar-max-three">
                <div class="avatar" @click="goToUser">
                  <van-image
                    width="0.9rem"
                    height="0.9rem"
                    fit="cover"
                    round
                    src="https://img01.yzcdn.cn/vant/cat.jpeg"
                  />
                 <div class="author">
                  <a>你的Maya</a>
                  <span>已关注 . 帅哥认证</span>
                 </div>
                </div>
                <div class="top">
                  <h1>数据大屏最简单自适应方案，无需适配rem单位</h1>
                </div>
                <div class="centre">
                  <van-image
                    fit="cover"
                    src="https://img01.yzcdn.cn/vant/cat.jpeg"
                  />
                </div>
                <div class="bottom">
                    <div>
                      <span class="author-name">你的Maya</span>
                      <span class="comment">945评论</span>
                      <span class="time">2小时前</span>
                    </div>
                    <div>
                      <i class="iconfont icon-cha"></i>
                    </div>
                  </div>
              </div>

              <!-- 无图片 小图 不带头像 -->
              <div class="item-four">
                <div class="top">
                  <h1>数据大屏最简单自适应方案，无需适配rem单位</h1>
                </div>
                <div class="bottom">
                    <div>
                      <span class="author-name">你的Maya</span>
                      <span class="comment">945评论</span>
                      <span class="time">2小时前</span>
                    </div>
                    <div>
                      <i class="iconfont icon-cha"></i>
                    </div>
                  </div>
              </div>
               <!-- 无图片 小图 带头像 -->
               <div class="item-avatar-four">
                <div class="avatar" @click="goToUser">
                  <van-image
                    width="0.9rem"
                    height="0.9rem"
                    fit="cover"
                    round
                    src="https://img01.yzcdn.cn/vant/cat.jpeg"
                  />
                 <div class="author">
                  <a>你的Maya</a>
                  <span>已关注 . 帅哥认证</span>
                 </div>
                </div>
                <div class="top">
                  <h1>数据大屏最简单自适应方案，无需适配rem单位</h1>
                </div>
                <div class="bottom">
                    <div>
                      <span class="author-name">你的Maya</span>
                      <span class="comment">945评论</span>
                      <span class="time">2小时前</span>
                    </div>
                    <div>
                      <i class="iconfont icon-cha"></i>
                    </div>
                  </div>
              </div>

        </van-skeleton>
      </van-list>
  </div>
</template>

<script>
import { getArticles } from '@/api/home'
export default {
  name: 'ArticleList',
  components: {},
  props: {
    channel: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      articles: [],
      loading: false,
      skeletonLoading: true,
      finished: false,
      timestamp: null
    }
  },
  created () {},
  watch: {
    articles: function (newVal, oldVal) {
      if (newVal.length >= 0) {
        this.skeletonLoading = false
      }
    }
  },
  methods: {
    async onLoad () {
      const res = getArticles({
        channel_id: this.channel.id, // 频道id
        timestamp: this.timestamp || Date.now(), // 时间戳，请求新的推荐数据传当前的时间戳，请求历史推荐传指定的时间戳,timestamp相当于页码，请求最新数据使用单前最新时间戳，下一页数据使用上一次返回的数据中的时间戳
        with_top: 1 // 是否包含置顶，进入页面第一次请求时要包含置顶文章，1包含，0不包含
      })
      // setTimeout(() => {
      //   this.articles.push(...res)
      // }, 1000)
      this.articles.push(...res)

      // 加载状态结束
      this.loading = false
      // 判断据是否全部加载完成
      if (res.length) {
        // 跟新下一页数据
        this.timestamp = res.pre_timestamp
      } else {
        // 没有数据了
        this.finished = true
      }
    },
    goToArticle () {
      const id = 3
      this.$router.push('/article/' + id)
      // this.$router.push({name: 'Details', params: { article_id:`${item.id}`}})
    },
    goToUser () {
      this.$router.push('/user')
    }
  }
}
</script>
<style lang="scss" scoped>
.article-list{
  position:fixed;
  left:0;
  right:0;
  top:97.95px;
  bottom:50px;
  overflow-y: auto;
  background-color: rgb(245, 243, 243);
}
.item-one{
  display: flex;
  margin-top: 10px;
  padding: 15px 15px 5px 15px;
  box-sizing: border-box;
  height: 118.9px;
  background-color: #fff;
  .left{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: left;
    width: 230px;
    margin-right: 14px;
    h1{
      font-size:16px;
      margin:0;
    }
    .left-bottom{
      display: flex;
      justify-content: space-between;;
      .icon-cha{
        font-size: 12px;
        color:#ccc;
      }
      span{
        font-size:12px;color:#ccc;
        margin-right: 10px;
      }
    }

  }
  .right{
    border-radius: 4px;
    overflow: hidden;
  }
}
.item-avatar-one{
  // display: flex;
  // flex-direction: column;
  margin-top: 10px;
  padding: 15px 15px 5px 15px;
  box-sizing: border-box;
  // height: 118.9px;
  background-color: #fff;
  .avatar{
    display: flex;
  // flex-direction: column;
  margin-bottom: 10px;
  .author{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-left: 10px;
    a{
      font-size: 16px;
      font-weight: 500;
    }
    span{
      font-size:12px;
      color:#ccc;
    }
  }
  }
  .bottom{
    display: flex;
    .left{
    // position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: left;
    width: 230px;
    margin-right: 14px;
    h1{
      font-size:16px;
      margin:0;
    }
    .left-bottom{
      display: flex;
      justify-content: space-between;;
      .icon-cha{
        font-size: 12px;
        color:#ccc;
      }
      span{
        font-size:12px;color:#ccc;
        margin-right: 10px;
      }
    }

  }
  .right{
    border-radius: 4px;
    overflow: hidden;
  }
  }

}
.item-two{
  display: flex;
  flex-direction: column;
  padding: 15px 15px 10px 15px;
  box-sizing: border-box;
  height:186px;
  margin-top: 10px;
  background-color: #fff;
  .top{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: left;
    h1{
      font-size:16px;
      margin:0;
    }

  }
  .centre{
    display: flex;
    justify-content: space-between;
    margin-top:10px;
  .van-image{
      width: 114.5px;
      height: 90px;
    }
    .van-image__img{
    }
  }

  .bottom{
    // margin:0;
    // padding:0;
      display: flex;
      justify-content: space-between;
      .icon-cha{
        font-size: 12px;
        color:#ccc;
      }
      span{
        font-size:12px;color:#ccc;
        margin-right: 10px;
      }
    }
}
.item-avatar-two{
  display: flex;
  flex-direction: column;
  padding: 15px 15px 10px 15px;
  box-sizing: border-box;
  height:226px;
  margin-top: 10px;
  background-color: #fff;
  .avatar{
    display: flex;
  // flex-direction: column;
  margin-bottom: 10px;
  .author{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-left: 10px;
    a{
      font-size: 16px;
      font-weight: 500;
    }
    span{
      font-size:12px;
      color:#ccc;
    }
  }
  }
  .top{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: left;
    h1{
      font-size:16px;
      margin:0;
    }

  }
  .centre{
    display: flex;
    justify-content: space-between;
    margin-top:10px;
  .van-image{
      width: 114.5px;
      height: 90px;
    }
    .van-image__img{
    }
  }

  .bottom{
    // margin:0;
    // padding:0;
      display: flex;
      justify-content: space-between;
      .icon-cha{
        font-size: 12px;
        color:#ccc;
      }
      span{
        font-size:12px;color:#ccc;
        margin-right: 10px;
      }
    }
}
.item-max-three{
  display: flex;
  flex-direction: column;
  padding: 15px 15px 15px 15px;
  box-sizing: border-box;
  height:290px;
  margin-top: 10px;
  background-color: #fff;
  .top{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: left;
    h1{
      font-size:16px;
      margin:0;
    }

  }
  .centre{
    // border-radius:10px;
    width: 100%;
    height: 200px;
    // overflow: hidden;
    // display: flex;
    // justify-content: space-between;
    margin-top:10px;
  .van-image{
      width: 100%;
      height: 200px;
    }
  }

  .bottom{
    // margin:0;
    // padding:0;
      display: flex;
      justify-content: space-between;
      .icon-cha{
        font-size: 12px;
        color:#ccc;
      }
      span{
        font-size:12px;color:#ccc;
        margin-right: 10px;
      }
    }
}
.item-avatar-max-three{
  display: flex;
  flex-direction: column;
  padding: 15px 15px 15px 15px;
  box-sizing: border-box;
  height:330px;
  margin-top: 10px;
  background-color: #fff;
  .avatar{
    display: flex;
  // flex-direction: column;
  margin-bottom: 10px;
  .author{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-left: 10px;
    a{
      font-size: 16px;
      font-weight: 500;
    }
    span{
      font-size:12px;
      color:#ccc;
    }
  }
  }
  .top{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: left;
    h1{
      font-size:16px;
      margin:0;
    }

  }
  .centre{
    // border-radius:10px;
    width: 100%;
    height: 200px;
    // overflow: hidden;
    // display: flex;
    // justify-content: space-between;
    margin-top:10px;
  .van-image{
      width: 100%;
      height: 200px;
    }
  }

  .bottom{
    // margin:0;
    // padding:0;
      display: flex;
      justify-content: space-between;
      .icon-cha{
        font-size: 12px;
        color:#ccc;
      }
      span{
        font-size:12px;color:#ccc;
        margin-right: 10px;
      }
    }
}
.item-four{
  display: flex;
  flex-direction: column;
  padding: 15px 15px 10px 15px;
  box-sizing: border-box;
  height:81px;
  margin-top: 10px;
  background-color: #fff;
  .top{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: left;
    h1{
      font-size:16px;
      margin:0;
    }

  }
  .centre{
    display: flex;
    justify-content: space-between;
    margin-top:10px;
  .van-image{
      width: 114.5px;
      height: 90px;
    }
    .van-image__img{
    }
  }

  .bottom{
    // margin:0;
    // padding:0;
      display: flex;
      justify-content: space-between;
      .icon-cha{
        font-size: 12px;
        color:#ccc;
      }
      span{
        font-size:12px;color:#ccc;
        margin-right: 10px;
      }
    }
}
.item-avatar-four{
  display: flex;
  flex-direction: column;
  padding: 15px 15px 10px 15px;
  box-sizing: border-box;
  height:121px;
  margin-top: 10px;
  background-color: #fff;
  .avatar{
    display: flex;
  // flex-direction: column;
  margin-bottom: 10px;
  .author{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-left: 10px;
    a{
      font-size: 16px;
      font-weight: 500;
    }
    span{
      font-size:12px;
      color:#ccc;
    }
  }
  }
  .top{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: left;
    h1{
      font-size:16px;
      margin:0;
    }

  }
  .centre{
    display: flex;
    justify-content: space-between;
    margin-top:10px;
  .van-image{
      width: 114.5px;
      height: 90px;
    }
    .van-image__img{
    }
  }

  .bottom{
    // margin:0;
    // padding:0;
      display: flex;
      justify-content: space-between;
      .icon-cha{
        font-size: 12px;
        color:#ccc;
      }
      span{
        font-size:12px;color:#ccc;
        margin-right: 10px;
      }
    }
}
</style>
